import React, { Component } from 'react';
import { openModal, removeContainer } from 'components/method/openModal';
import ExpenseService from '../expense.service';
import { Modal, Table, Button, Popover } from 'antd';
import { currencyPrecisionCal , messages } from "share/common";

class ReceiptAmountMsg extends Component {

  constructor(props) {
    super(props);
    this.state = {
      amountMsg: [],
      loading: false
    };

    this.columns = [
      {
        title: messages('common.user.id')/*工号*/,
        dataIndex: 'employNum',
        width: 120,
        render: value =>
          (value && value) ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
      },
      {
        title: messages('expense-1.key720')/*人员*/,
        dataIndex: 'employName',
        width: 120,
        render: value =>
          (value && value) ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
      },
      {
        title: messages('common.currency')/*币种*/,
        dataIndex: 'currencyCode',
        width: 120,
        render: value =>
          (value && value) ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
      },
      {
        title: messages('common.amount')/*金额*/,
        dataIndex: 'reimbursedAmount',
        width: 120,
        render: (value, record) =>
          (value && value) ? <Popover placement="topLeft" content={currencyPrecisionCal(record.currencyCode, value / 100)}>{currencyPrecisionCal(record.currencyCode, value / 100)}</Popover> : '-'
      },
      {
        title: messages('expense-1.key721')/*渠道*/,
        dataIndex: 'invoiceStatus',
        width: 120,
        render: (value, record) =>
          (value && value)
            ? (
              <Popover
                placement="topLeft"
                content={value === 'INIT' ? messages('expense-1.key257')/*账本*/ : messages('expense-1.key722', { arg1: record.expenseReportBusinessCode })/*报销单{arg1}*/}
              >
                {value === 'INIT' ? messages('expense-1.key257')/*账本*/ : messages('expense-1.key722', { arg1: record.expenseReportBusinessCode })/*报销单{arg1}*/}
              </Popover>
            )
            : '-'
      },
      {
        title: messages('common.expense.type')/*费用类型*/,
        dataIndex: 'expenseTypeName',
        width: 120,
        render: value =>
          (value && value) ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
      },
    ];
  }


  componentDidMount() {
    this.dataInit();

  }

  dataInit = async () => {
    const { receiptId, invoiceOID } = this.props;
    await this.setState({ loading: true });
    const res = await ExpenseService.getReceiptAmountMsg({ receiptId, invoiceOID });
    this.setState({ amountMsg: res.data.rows, loading: false });
  };

  render() {
    const { visible, afterClose } = this.props;
    return (
      <Modal
        width={760}
        className="receipt-amount-change"
        visible={visible}
        onCancel={afterClose}
        closable={false}
        title={messages('expense-1.key723')/*占用明细*/}
        footer={[
          <Button key="back" onClick={afterClose}>
            {messages('common.back')/*返回*/}
          </Button>,
          <Button key="submit" type="primary" onClick={afterClose}>
            {messages('common.ok')/*确定*/}
          </Button>,
        ]}
       >
        <p>{messages('expense-1.key724')/*此发票报销金额已被占用，明细如下*/}</p>
        <Table
          pagination={false}
          size={'small'}
          columns={this.columns}
          dataSource={this.state.amountMsg}
          loading={this.state.loading}
        />
      </Modal>
    );
  }
}

ReceiptAmountMsg.propTypes = {};

ReceiptAmountMsg.open = function (props, env) {
  const targetProps = {
    ...props,
    visible: true,
    loadWhenMount: true,
    afterClose: (data) => {
      removeContainer(container);
      container = null;
    }
  };
  let container = openModal(ReceiptAmountMsg, targetProps, env);
};

export default ReceiptAmountMsg;
